<template>
  <el-dialog
    title="分配权限"
    :visible="showPermissionDialog"
    @close="$emit('update:showPermissionDialog', false)"
  >
    <el-tree
      node-key="id"
      :data="permissionData"
      :props="{ label: 'name' }"
      show-checkbox
      default-expand-all
      :default-checked-keys="permIds"
    />
  </el-dialog>
</template>
<script>
import { getPermissionList } from '@/api/permission'
import { getRoleDetail } from '@/api/role'
import { transListToTreeData } from '@/utils'

export default {
  props: {
    showPermissionDialog: {
      type: Boolean,
      default: false
    },
    permissionId: {
      type: Number,
      default: 1
    }

  },
  data() {
    return {
      permissionData: [],
      permIds: []
    }
  },
  watch: {
    permissionId: {
      immediate: true,
      handler(newVal) {
        if (newVal !== null) {
          this.btnPermission()
        }
      }
    }
  },

  created() {
    // this.btnPermission()
  },
  methods: {
    async  btnPermission() {
      this.permissionData = transListToTreeData(await getPermissionList(), 0)
      const { permIds } = await getRoleDetail(this.permissionId)
      this.permIds = permIds
    }
  }
}
</script>
<style scoped>
</style>
